<template>
  <div class="flex flex-col min-h-screen">
    <div class="container mx-auto p-8 flex-1">
      <h1 class="text-4xl font-bold text-center mb-4 relative after:block after:w-24 after:h-1 after:bg-primary-500 after:mx-auto">
        成果展示
      </h1>
      <a-breadcrumb class="text-center mb-4">
        <a-breadcrumb-item>
          <router-link to="/" class="hover:underline">首页</router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          <router-link to="/CG" class="hover:underline">成果展示</router-link>
        </a-breadcrumb-item>
      </a-breadcrumb>

      <achievement-card />
    </div>
    <FooterComponent />
  </div>
</template>

<script setup lang="ts">
import FooterComponent from './Footer.vue';
import AchievementCard from "./DataTable/AchievementCard.vue";
import {onMounted} from "vue";

onMounted(() => {
  document.title = '农业外来入侵物种防控与管理平台';
});
</script>

<style scoped>
</style>
